<template>
    <div class="register">

        <div class="titles">
            {{ $t('register.register') }}
        </div>
        <div class="box">
            <div class="content">
                <el-form label-position="right" :rules="rules" ref="ruleForm" label-width="80px" :model="userInfo">
                    <el-form-item :label="$t('register.xingming')" prop="xingming">
                        <el-input :placeholder="$t('register.xingming')" v-model="userInfo.xingming"></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('register.shenfen')">
                        <el-upload class="avatar-uploader" :action="`${imgUrl}/imgupload`" :show-file-list="false"
                            :on-success="(response, file, fileLis) => {
                                handleAvatarSuccess(response, file, 'shenfen')
                            }">
                            <img v-if="img.shenfen" :src="img.shenfen" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                    <el-form-item :label="$t('register.shenfen1')">
                        <el-upload class="avatar-uploader" :action="`${imgUrl}/imgupload`" :show-file-list="false"
                            :on-success="(response, file, fileLis) => {
                                handleAvatarSuccess(response, file, 'shenfen1')
                            }">
                            <img v-if="img.shenfen1" :src="img.shenfen1" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                    <el-form-item :label="$t('register.yinhang')">
                        <div style="display: flex;">
                            <el-upload class="avatar-uploader" :action="`${imgUrl}/imgupload`" :show-file-list="false"
                                :on-success="(response, file, fileLis) => {
                                    handleAvatarSuccess(response, file, 'yinhang')
                                }">
                                <img v-if="img.yinhang" :src="img.yinhang" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </div>
                    </el-form-item>
                    <el-form-item :label="$t('register.bank_bh')" prop="bank_bh">
                        <el-input :placeholder="$t('register.bank_bh')" v-model="userInfo.bank_bh"></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('register.tel')" prop="tel">
                        <el-input :placeholder="$t('register.tel')" v-model="userInfo.tel"></el-input>
                    </el-form-item>
                    <!--<el-form-item :label="$t('register.code')" prop="code">
                        <div style="display: flex;align-items: center;">
                            <el-input :placeholder="$t('register.code')" v-model="userInfo.code"></el-input>
                            <el-button type="primary" @click="getCode">{{ button }}</el-button>
                        </div>
                    </el-form-item>-->
                    <el-form-item :label="$t('register.mima')" prop="mima">
                        <el-input show-password :placeholder="$t('register.mima')" v-model="userInfo.mima"></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('register.password2')" prop="password2">
                        <el-input show-password :placeholder="$t('register.password2')"
                            v-model="userInfo.password2"></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('register.tuiguang')">
                        <el-input :placeholder="$t('register.tuiguang')" v-model="userInfo.tuiguang"></el-input>
                    </el-form-item>
                    <el-form-item label="">
                        <el-checkbox v-model="checked">{{ $t('register.agree') }}</el-checkbox>
                        <a href="javascript:;" @click="showText = true">《{{ $t('register.xieyi') }}》</a>
                    </el-form-item>
                    <el-form-item label="">
                        <el-button @click="submit" type="primary" style="width: 80%;" :disabled="isSubmit">{{
                            $t('register.submit') }}</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <el-dialog :title="$t('register.xieyi')" :visible.sync="showText" center>
            <div v-html="str" style="height: 400px;overflow-y: auto;"></div>
        </el-dialog>
    </div>
</template>
<script>
import {
    str
} from './text.js'
const { ipcRenderer } = require("electron");
import axios from "axios";
export default {
    name: 'register',
    data() {
        return {
            str,
            userInfo: {
                tel: '',
                tuiguang: '',
                code: '',
                ploatform: 'HY',
                xingming: '',
                bank_bh: '',
                shenfen: '',
                shenfen1: '',
                yinhang: '',
                mima: '',
                password2: '',
            },
            isSubmit: false,
            rules: {
                tel: [
                    { required: true, message: this.$t('register.tel'), trigger: 'blur' },
                ],
                code: [
                    { required: true, message: this.$t('register.code'), trigger: 'blur' }
                ],
                xingming: [
                    { required: true, message: this.$t('register.xingming'), trigger: 'blur' }
                ],
                bank_bh: [
                    { required: true, message: this.$t('register.bank_bh'), trigger: 'blur' }
                ],
                mima: [
                    { required: true, message: this.$t('register.mima'), trigger: 'blur' }
                ],
                password2: [
                    { required: true, message: this.$t('register.password2'), trigger: 'blur' }
                ],
            },
            imgUrl: '',
            img: {
                shenfen: '',
                shenfen1: '',
                yinhang: '',
            },
            button: this.$t('register.getCode'),
            btnSetTimeOut: null,
            checked: true,
            showText: false,

        }
    },
    mounted() {
        this.userInfo.ploatform = 'XS';
        this.imgUrl = 'http://8.154.28.17:8097'
        // this.userInfo.ploatform = this.$db.read().get('versionONE.ploatform').value();
        // this.imgUrl = this.$db.read().get('versionONE.httpUrl').value()
    },
    methods: {
        submit() {
            if (!this.checked) {
                this.$message({
                    message: this.$t('register.checked'),
                    type: 'error'
                });
                return
            }
            if (this.userInfo.mima != this.userInfo.password2) {
                this.$message({
                    message: this.$t('register.passwordError'),
                    type: 'error'
                });
                return
            }
            this.$refs['ruleForm'].validate((valid) => {
                if (valid) {
                    if (!this.userInfo.shenfen || !this.userInfo.shenfen1 || !this.userInfo.yinhang) {
                        this.$message({
                            message: this.$t('register.imageNumber'),
                            type: 'error'
                        });
                        return
                    }
                    this.isSubmit = true
                    let object = JSON.parse(JSON.stringify(this.userInfo))
                    delete object.password2
                    axios.post(`${this.imgUrl}/register`, object).then(res => {
                        this.isSubmit = false
                        if (res.data.code == 0) {
                            this.$message({
                                message: this.$t('register.success'),
                                type: 'success'
                            });
                            this.$refs['ruleForm'].resetFields();
                            this.$router.push({ name: 'login' })
                            ipcRenderer.send("win-msg", "goLogin");
                        } else {
                            this.$message({
                                message: res.data.msg,
                                type: 'error'
                            });
                        }
                    }).catch(err => {
                        this.isSubmit = false
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        getCode() {
            if (this.button != this.$t('register.getCode')) return
            if (!this.userInfo.tel) {
                this.$message(this.$t('register.tel'));
                return
            }
            axios.post(`${this.imgUrl}/sendsms`, {
                tel: `${this.userInfo.tel}`,
                type: 1
            }).then(res => {
                if (res.data.code == 0) {
                    this.$message({
                        message: this.$t('register.sendCode'),
                        type: 'success'
                    });
                } else {
                    this.$message({
                        message: this.$t('register.sendCodeFile'),
                        type: 'error'
                    });
                }
            })
            let number = 60
            if (this.button == this.$t('register.getCode')) {
                clearInterval(this.btnSetTimeOut)
                this.btnSetTimeOut = setInterval(() => {
                    if (!number) {
                        clearInterval(this.btnSetTimeOut)
                        this.button = this.$t('register.getCode')
                    } else {
                        number--
                        this.button = number + 's'
                    }
                }, 1000)
            }
        },
        handleAvatarSuccess(res, file, str) {
            this.img[`${str}`] = URL.createObjectURL(file.raw);
            this.userInfo[`${str}`] = res.data
        },
        showzhuce() {
            this.$router.push({ name: 'login' })
            ipcRenderer.send("win-msg", "goLogin");
        },
        handleWinMinify() {
            // 最小化应用
            ipcRenderer.send("win-msg", "minify");
        },
        handleWinClose() {
            // 退出应用
            ipcRenderer.send("win-msg", "close");
        },
    }
}


</script>
<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;

}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}



.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>
<style lang="scss" scoped>
.register {
    position: relative;
    width: 100vw;
    min-height: 100vh;
    background: #fff;
    -webkit-app-region: drag;

}

.titles {
    height: 50px;
    font-size: 20px;
    text-align: center;
    line-height: 50px;
}

.register-top {
    position: absolute;
    top: 0;
    right: 8px;
    display: flex;
    overflow: hidden;
    border-radius: 0 0 4px 4px;
    -webkit-app-region: no-drag;

    .menu-icon {
        padding: 3px 11px;
        vertical-align: middle;
        color: #ffffff;
        background-color: #9e9e9e;
        cursor: pointer;

        .text {
            font-size: 12px;
        }

        &.config {
            background-color: #7a7a7a;
            margin-right: 4px;
            padding: 3px 12px;

            .svg-icon {
                font-size: 14px;
            }
        }

        &.close {
            background-color: rgb(191, 17, 29);
        }
    }
}


.box {
    height: calc(100vh - 50px);
    overflow-y: auto;
    -webkit-app-region: no-drag;

    .content {
        margin: auto;
        width: 70%;
    }
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
</style>